<template>
    <div>
        <el-form ref="form" :model="form" label-width="120px">
            <el-row>
                <el-col :span="24" class="withdrawal_title">
                    <el-form-item label="平台收益余额：">
                        <span class="balance_text">{{this.balance}}元</span>
                    </el-form-item>
                    <div class="defalut_excel">
                        <el-button size="small" @click="$router.push('/account/withdrawalRecord')">提现记录</el-button>
                    </div>
                </el-col>
            </el-row>
            <div class="withdrawal_main">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="提现金额" class="withdrawal_int1">
                            <el-input class="bill_int" v-model="form.amount" placeholder="请输入提现金额" onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')" suffix-icon="iconfont icon-yuan"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="提现备注">
                            <el-input :rows="3" type="textarea" v-model="form.remark" resize="none" placeholder="请输入提现备注"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="withdrawal_button">
                        <el-button type="primary" class="w_info" plain size="small" @click="withdraDeposit()">提现</el-button>
                        <el-button type="primary" class="w_primary" size="small" @click="loginXingye()">登录执剑人平台</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import { xingyeURL } from '@/util/constant';
    @Component()
    export default class WithDrawal extends Vue {
        // 平台收益余额
        balance: string = '';
        form = {
            amount: '',
            remark: ''
        }
        // 获取平台收益余额
        async getQuery() {
            let res = await this.$http.get('platform/income/query')
            if (res.status == 200){
                if (res.data != null) {
                    this.balance = res.data.balance;
                } else {
                    this.balance = '--';
                }
            }
        }
        withdraDeposit () {
            if (!this.form.amount){
                this.$alert('请输入提现金额。','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            if (!this.form.remark){
                this.$alert('请输入提现备注。','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            this.$confirm('确定提现' + this.form.amount + '元吗？','提醒',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.withdraPost();
            })
        }
        async withdraPost () {
            let sendForm = this.form;
            let res = await this.$http.post('platform/income/wthdraw',sendForm)
            if (res.status == 200){
                this.getQuery();
                this.$alert('提现成功。','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {
                        this.form.amount = '';
                        this.form.remark = '';
                    }
                })
            }
        }
        // 登录兴业
        loginXingye () {
            window.open(xingyeURL.URL)
        }
        mounted () {
            this.getQuery();
        }
    }
</script>

<style scoped lang="scss">
    .withdrawal_title {
        border-bottom: 1px solid $__color-line;
        .el-form-item {
            margin-bottom: 0;
        }
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        padding-left: 10%;
        padding-right: 10%;
    }
    .balance_text {
        color: $__color-remind;
        font-size: $__big-font-size;
    }
    .withdrawal_main {
        display: flex;
        justify-content: center;
        margin-left: 23%;
        margin-top: 20px;
    }
    .withdrawal_button {
        margin-left: 120px;
        width: 320px;
        display: flex;
        justify-content: space-between;
        .w_info {
            width: 150px;
            height: 36px;
            color: $__color-primary;
            border: 1px solid $__color-primary;
            border-radius: 4px;
            background: $__color-bg-unimportance;
        }
        .w_primary {
            width: 150px;
            height: 36px;
        }
    }
    .withdrawal_int1 {
        .el-input {
            width: 320px;
        }
    }
</style>
<style lang="scss">
    .withdrawal_main {
        .el-textarea__inner {
            width: 320px;
        }
    }
    .el-main {
        overflow-x: hidden;
    }
</style>
